<template>
  <div class="plant-identification" :class="{'results-active': results.length > 0}">
    <div class="content-container" :class="{'fade-out': results.length > 0}">
      <div class="header">
        <div class="back-to-community">
          <router-link to="/dashboard" class="back-button">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
            回到社区
          </router-link>
        </div>

        <h1>AI 智能识图</h1>
        <div class="subtitle">使用先进的 AI 技术，探索自然世界的奥秘</div>

        <div class="recognition-type-selector">
          <el-radio-group v-model="recognitionType" size="large">
            <el-radio-button label="plant">植物识别</el-radio-button>
            <el-radio-button label="animal">动物识别</el-radio-button>
          </el-radio-group>
        </div>
      </div>

      <div class="upload-container" :class="{ 'analyzing': isAnalyzing }">
        <div
            class="upload-area"
            :class="{ 'has-image': imageUrl }"
            @click="triggerFileInput"
            @dragover.prevent="dragOver = true"
            @dragleave.prevent="dragOver = false"
            @drop.prevent="onFileDrop"
            :style="imageUrl ? `background-image: url(${imageUrl})` : ''"
        >
          <div class="upload-content" v-if="!imageUrl">
            <div class="upload-icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7"/><line x1="16" x2="22" y1="5" y2="5"/><line x1="19" x2="19" y1="2" y2="8"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>
            </div>
            <div class="upload-text">
              <span>点击或拖拽图片到此处</span>
              <span class="upload-hint">支持 JPG、PNG、WEBP 格式</span>
            </div>
          </div>

          <div class="analyzing-overlay" v-if="isAnalyzing">
            <div class="scanner-line"></div>
            <div class="analyzing-text">
              {{ recognitionType === 'plant' ? '正在分析植物...' : '正在分析动物...' }}
            </div>
          </div>

          <input
              type="file"
              ref="fileInput"
              accept="image/*"
              class="file-input"
              @change="onFileSelected"
          >
        </div>

        <button
            class="analyze-button"
            :disabled="!imageUrl || isAnalyzing"
            @click="analyzeImage"
        >
          <span v-if="!isAnalyzing">
            {{ recognitionType === 'plant' ? '识别植物' : '识别动物' }}
          </span>
          <span v-else class="loading-dots">
            <span>.</span><span>.</span><span>.</span>
          </span>
        </button>
      </div>
    </div>

    <transition name="slide-up">
      <div class="results-container" v-if="results.length > 0">
        <div class="results-header">
          <h2>识别结果</h2>
          <button class="new-recognition-button" @click="resetRecognition">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>
            识别其他{{ recognitionType === 'plant' ? '植物' : '动物' }}
          </button>
        </div>

        <div class="main-result" v-if="results[0]" @click="selectedResult = results[0]">
          <div class="main-result-image">
            <img
              :src="results[0].baike_info.image_url || imageUrl"
              :alt="results[0].name"
              @error="handleImageError"
              referrerpolicy="no-referrer"
            >
            <div class="main-result-score">
              <div class="score-bar">
                <div class="score-fill" :style="{width: `${results[0].score * 100}%`}"></div>
              </div>
              <div class="score-text">{{ (results[0].score * 100).toFixed(1) }}% 匹配度</div>
            </div>
          </div>
          <div class="main-result-info">
            <h3>{{ results[0].name }}</h3>
            <p class="main-result-description">{{ results[0].baike_info.description || '暂无描述' }}</p>
            <a v-if="results[0].baike_info.baike_url" :href="results[0].baike_info.baike_url" target="_blank" class="result-link" @click.stop>
              在百度百科查看详情
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>
            </a>
          </div>
        </div>

        <div class="other-results" v-if="results.length > 1">
          <h3 class="other-results-title">其他可能的结果</h3>
          <div class="other-results-grid">
            <div
              v-for="(result, index) in results.slice(1)"
              :key="index"
              class="result-card"
              @click="selectedResult = result"
            >
              <div class="result-image">
                <img
                  :src="result.baike_info.image_url || imageUrl"
                  :alt="result.name"
                  @error="handleImageError"
                  referrerpolicy="no-referrer"
                >
                <div class="result-score">
                  <div class="score-bar">
                    <div class="score-fill" :style="{width: `${result.score * 100}%`}"></div>
                  </div>
                  <div class="score-text">{{ (result.score * 100).toFixed(1) }}% 匹配度</div>
                </div>
              </div>
              <div class="result-info">
                <h4>{{ result.name }}</h4>
                <p class="result-description" v-if="result.baike_info.description">
                  {{ truncateText(result.baike_info.description, 150) }}
                </p>
                <a
                  v-if="result.baike_info.baike_url"
                  :href="result.baike_info.baike_url"
                  target="_blank"
                  class="result-link"
                  @click.stop
                >
                  在百度百科查看详情
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>

    <transition name="modal">
      <div class="modal-overlay" v-if="selectedResult" @click="selectedResult = null">
        <div class="modal-content" @click.stop>
          <button class="modal-close" @click="selectedResult = null">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
          </button>

          <div class="modal-image">
            <img
              :src="selectedResult.baike_info.image_url || imageUrl"
              :alt="selectedResult.name"
              @error="handleImageError"
              referrerpolicy="no-referrer"
            >
            <div class="modal-score">
              <div class="score-bar">
                <div class="score-fill" :style="{width: `${selectedResult.score * 100}%`}"></div>
              </div>
              <div class="score-text">{{ (selectedResult.score * 100).toFixed(1) }}% 匹配度</div>
            </div>
          </div>

          <div class="modal-info">
            <h2>{{ selectedResult.name }}</h2>
            <p class="modal-description">{{ selectedResult.baike_info.description || '暂无详细描述' }}</p>
            <a
              v-if="selectedResult.baike_info.baike_url"
              :href="selectedResult.baike_info.baike_url"
              target="_blank"
              class="modal-link"
            >
              在百度百科查看
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>
            </a>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import { TravelNoteApi } from '@/api/new/travelNoteApi.js';
import { ElMessage } from 'element-plus';

export default {
  name: 'AIRecognition',
  data() {
    return {
      imageUrl: '',
      isAnalyzing: false,
      dragOver: false,
      results: [],
      selectedResult: null,
      recognitionType: 'plant', // 默认为植物识别
      // 以下模拟数据仅作为备用，实际将使用API返回的数据
      mockPlantResponse: {
        "result": [
          {
            "score": 0.60726464,
            "name": "吉娃莲",
            "baike_info": {
              "baike_url": "https://baike.baidu.com/item/%E5%90%89%E5%A8%83%E8%8E%B2/1289904",
              "image_url": "https://bkimg.cdn.bcebos.com/pic/6a600c338744ebf8a07ad897d1f9d72a6059a70b?x-bce-process=image/resize,m_lfit,w_536,limit_1/quality,Q_70",
              "description": "吉娃莲，景天科拟石莲花属，别名：吉娃娃（因为常与狗名混淆，所以大多数情况只叫吉娃莲），吉娃莲，植株小型，无茎的莲座叶盘非常紧凑。卵形叶较厚，带小尖，蓝绿色被浓厚的白粉，叶缘为美丽的深粉红色。花序先端弯曲，钟状，红色。栽培不太困难，夏天不能浇过多的水。原产于墨西哥奇瓦瓦州，生长在空气流通较好、日照充分的山坡上。叶尖的红色特别美丽，是一种观赏性很强的多肉植物。"
            }
          },
          {
            "score": 0.122742385,
            "name": "红爪",
            "baike_info": {
              "baike_url": "https://baike.baidu.com/item/%E7%BA%A2%E7%88%AA/24213652",
              "image_url": "https://bkimg.cdn.bcebos.com/pic/83025aafa40f4bfbd2e111380c4f78f0f73618ac?x-bce-process=image/resize,m_lfit,w_536,limit_1/quality,Q_70",
              "description": "红爪，景天科拟石莲属多肉植物，生长季冬种，浇水量较少，日照量一般。"
            }
          },
          {
            "score": 0.11690347,
            "name": "东云",
            "baike_info": {
              "baike_url": "https://baike.baidu.com/item/%E4%B8%9C%E4%BA%91/1134931",
              "image_url": "https://bkimg.cdn.bcebos.com/pic/f3d3572c11dfa9ec0230f46868d0f703918fc1b7?x-bce-process=image/resize,m_lfit,w_536,limit_1/quality,Q_70",
              "description": "东云（Echeveria agavoides Lem.）是景天科拟石莲花属的多肉植物，原产于墨西哥多州。特征是形状锋利的叶片。拉丁文种加词意为\"似龙舌兰的\"，指其叶片形状与排列方式与龙舌兰属植物相似。约于1861年前后被引入人工栽培中，于1863年发表。果实椭圆形，中等大小，果皮乳白色，阳面有红色，果肉白色，肉质柔软，多汁，味酸甜，粘核；含可溶性固形物10%，品质中等。"
            }
          }
        ],
        "log_id": 1906606742546812079
      },
      mockAnimalResponse: {
        "result": [
          {
            "score": 0.8726464,
            "name": "金毛犬",
            "baike_info": {
              "baike_url": "https://baike.baidu.com/item/%E9%87%91%E6%AF%9B%E7%8A%AC/476997",
              "image_url": "https://bkimg.cdn.bcebos.com/pic/b21c8701a18b87d6277f9a4a130828381f30fd1f?x-bce-process=image/resize,m_lfit,w_536,limit_1/quality,Q_70",
              "description": "金毛寻回犬（Golden Retriever）是单猎犬，比较流行的狗的品种。在猎捕野禽的寻回犬中培养出来的，游泳的续航力极佳。它是最常见的家犬之一，因为它很容易养，有耐心并且对主人要求不多，只要定期运动，食物和兽医体检就可以了。这种狗是非常容易训练的，性格友善、可靠，能和小孩子相处，这种犬的独特之处就是它讨人喜欢忠诚、对主人要求不多、适应环境的能力强，只要定期的运动，食物和兽医体检就可以了。"
            }
          },
          {
            "score": 0.1242385,
            "name": "拉布拉多犬",
            "baike_info": {
              "baike_url": "https://baike.baidu.com/item/%E6%8B%89%E5%B8%83%E6%8B%89%E5%A4%9A%E7%8A%AC/478924",
              "image_url": "https://bkimg.cdn.bcebos.com/pic/b8014a90f603738d2a31c4b5b11bb051f819ec4d?x-bce-process=image/resize,m_lfit,w_536,limit_1/quality,Q_70",
              "description": "拉布拉多猎犬（Labrador Retriever），别名寻回犬、拉布拉多、拉拉。拉布拉多猎犬是一种中大型犬类，是非常适合被选作经常出入公共场合的导盲犬或地铁警犬及搜救犬和其他工作犬的狗品种，因原产地在加拿大的纽芬兰与拉布拉多省而得名。跟西伯利亚雪撬犬和金毛寻回犬并列三大无攻击性犬类。拉布拉多智商位列世界犬类第六位。个性忠诚、大气、憨厚、温和、阳光、开朗、活泼，智商极高，也对人很友善，拉布拉多猎犬有四种颜色，分别为：黑色、黄色、巧克力、米白色。"
            }
          },
          {
            "score": 0.0969347,
            "name": "哈士奇",
            "baike_info": {
              "baike_url": "https://baike.baidu.com/item/%E8%A5%BF%E4%BC%AF%E5%88%A9%E4%BA%9A%E9%9B%AA%E6%A9%87%E7%8A%AC/3798639",
              "image_url": "https://bkimg.cdn.bcebos.com/pic/b21bb051f8198618367aab2b5bed2e738bd4e6a4?x-bce-process=image/resize,m_lfit,w_536,limit_1/quality,Q_70",
              "description": "西伯利亚雪橇犬（俄语：Сибирский хаски，英语：Siberian husky），常见别名哈士奇，昵称为二哈。西伯利亚雪橇犬体重介于雄犬20-27公斤，雌犬16-23公斤，身高大约雄犬肩高53-58厘米，雌犬51-56厘米，是一种中型犬。西伯利亚雪橇犬是原始的古老犬种，主要生活在在西伯利亚东北部、格陵兰南部。哈士奇名字的由来，是源自其独特的嘶哑叫声。"
            }
          }
        ],
        "log_id": 1906606742546812080
      }
    }
  },
  methods: {
    triggerFileInput() {
      if (this.$refs.fileInput) {
        this.$refs.fileInput.value = '';
      }
      this.$refs.fileInput.click();
    },
    async onFileSelected(event) {
      const file = event.target.files[0];
      if (file) {
        await this.processFile(file);
      }
    },
    async onFileDrop(event) {
      this.dragOver = false;
      const file = event.dataTransfer.files[0];
      if (file && file.type.startsWith('image/')) {
        await this.processFile(file);
      }
    },
    async processFile(file) {
      if (file.size > 5 * 1024 * 1024) {
        ElMessage.error('图片大小不能超过5MB');
        if (this.$refs.fileInput) {
          this.$refs.fileInput.value = '';
        }
        return;
      }

      const reader = new FileReader();
      reader.onload = (e) => {
        this.imageUrl = e.target.result;
        this.results = [];
      };
      reader.readAsDataURL(file);

      try {
        this.isAnalyzing = true;

        const imageUrl = await TravelNoteApi.uploadImage(file);
        this.serverImageUrl = imageUrl;
      } catch (error) {
        ElMessage.error(`上传失败: ${error.message || '未知错误'}`);
        console.error('上传图片失败:', error);
      } finally {
        this.isAnalyzing = false;
        if (this.$refs.fileInput) {
          this.$refs.fileInput.value = '';
        }
      }
    },
    async analyzeImage() {
      if (!this.serverImageUrl) {
        ElMessage.warning('请先上传图片');
        return;
      }

      this.isAnalyzing = true;

      try {
        const response = await TravelNoteApi.detectImage(this.serverImageUrl, this.recognitionType);
        const result = typeof response === 'string' ? JSON.parse(response) : response;

        if (result && result.result) {
          this.results = result.result.map(item => {
            return {
              score: parseFloat(item.score || item.confidence || 0),
              name: item.name,
              baike_info: {
                baike_url: item.baike_info?.baike_url || '',
                image_url: item.baike_info?.image_url || '',
                description: item.baike_info?.description || ''
              }
            };
          });
        } else {
          throw new Error('识别结果为空');
        }
      } catch (error) {
        console.error('识别失败:', error);
        ElMessage.error(`识别失败: ${error.message || '未知错误'}`);

        if (process.env.NODE_ENV === 'development') {
          console.warn('使用模拟数据作为备用');
          if (this.recognitionType === 'plant') {
            this.results = this.mockPlantResponse.result;
          } else {
            this.results = this.mockAnimalResponse.result;
          }
        }
      } finally {
        this.isAnalyzing = false;
      }
    },
    truncateText(text, maxLength) {
      if (!text) return '';
      if (text.length <= maxLength) return text;
      return text.substring(0, maxLength) + '...';
    },
    resetRecognition() {
      this.results = [];
      this.selectedResult = null;
      this.imageUrl = '';
      this.serverImageUrl = '';

      if (this.$refs.fileInput) {
        this.$refs.fileInput.value = '';
      }

      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });

      setTimeout(() => {
        const uploadArea = document.querySelector('.upload-area');
        if (uploadArea) {
          uploadArea.scrollIntoView({ behavior: 'smooth' });
        }
      }, 300);
    },
    handleImageError(e) {
      e.target.src = this.imageUrl || require('@/assets/images/default-plant.jpg');
    }
  }
}
</script>

<style lang="less">
@primary-color: #ff7d3b;
@secondary-color: #ff9f45;
@text-color: #1f2937;
@background-color: #f9fafb;
@card-background: #ffffff;
@border-radius: 12px;
@transition-duration: 0.3s;

.plant-identification {
  user-select: none;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  color: @text-color;
  background-color: @background-color;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;

  &.results-active {
    overflow: hidden;
  }

  .content-container {
    padding: 2rem;
    transition: opacity 0.5s ease, transform 0.5s ease;

    &.fade-out {
      opacity: 0.1;
      transform: scale(0.95);
      pointer-events: none;
    }
  }

  .header {
    position: relative;
    padding-top: 30px;
    text-align: center;
    margin-bottom: 3rem;

    h1 {
      margin-top: 20px;
      font-size: 2.5rem;
      font-weight: 700;
      background: linear-gradient(135deg, @primary-color, @secondary-color);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .subtitle {
      font-size: 1.2rem;
      color: #6b7280;
      margin-bottom: 1.5rem;
    }

    .recognition-type-selector {
      margin-top: 1.5rem;

      .el-radio-button__inner {
        background: linear-gradient(135deg, @primary-color, @secondary-color);
        border-color: @primary-color;
        color: white;
        font-weight: 500;

        &:hover {
          opacity: 0.9;
        }
      }

      .el-radio-button__original-radio:checked + .el-radio-button__inner {
        background: linear-gradient(135deg, darken(@primary-color, 10%), darken(@secondary-color, 10%));
        border-color: darken(@primary-color, 10%);
        box-shadow: -1px 0 0 0 darken(@primary-color, 10%);
      }
    }
  }

  .back-to-community {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;

    .back-button {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 8px 16px;
      background-color: #fff;
      border-radius: 20px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      color: #333;
      text-decoration: none;
      font-weight: 500;
      transition: all 0.3s ease;

      &:hover {
        background-color: #f5f5f5;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }

      svg {
        stroke: #333;
      }
    }
  }

  .upload-container {
    max-width: 700px;
    margin: 0 auto 4rem;
    position: relative;

    &.analyzing {
      .upload-area {
        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.5);
          border-radius: @border-radius;
          z-index: 1;
        }
      }
    }

    .upload-area {
      width: 100%;
      height: 400px;
      border: 2px dashed #d1d5db;
      border-radius: @border-radius;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      position: relative;
      background-size: cover;
      background-position: center;
      transition: all @transition-duration;
      margin-bottom: 1.5rem;

      &:hover {
        border-color: @primary-color;
      }

      &.has-image {
        border: none;

        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.2);
          border-radius: @border-radius;
          transition: background @transition-duration;
        }

        &:hover::before {
          background: rgba(0, 0, 0, 0.3);
        }
      }

      .upload-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #6b7280;

        .upload-icon {
          width: 80px;
          height: 80px;
          border-radius: 50%;
          background: #f3f4f6;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 1.5rem;
          color: @primary-color;
        }

        .upload-text {
          display: flex;
          flex-direction: column;
          align-items: center;

          span {
            font-size: 1.1rem;
            margin-bottom: 0.5rem;
          }

          .upload-hint {
            font-size: 0.9rem;
            color: #9ca3af;
          }
        }
      }

      .analyzing-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 2;

        .scanner-line {
          width: 80%;
          height: 2px;
          background: linear-gradient(90deg, transparent, @primary-color, transparent);
          position: absolute;
          animation: scan 2s ease-in-out infinite;
        }

        .analyzing-text {
          color: white;
          font-size: 1.2rem;
          font-weight: 500;
          margin-top: 1rem;
          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }
      }

      .file-input {
        display: none;
      }
    }

    .analyze-button {
      width: 100%;
      padding: 1rem;
      background: linear-gradient(135deg, @primary-color, @secondary-color);
      color: white;
      border: none;
      border-radius: @border-radius;
      font-size: 1.1rem;
      font-weight: 600;
      cursor: pointer;
      transition: all @transition-duration;

      &:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(255, 125, 59, 0.3);
      }

      &:disabled {
        opacity: 0.7;
        cursor: not-allowed;
      }

      .loading-dots {
        span {
          animation: loadingDots 1.4s infinite both;

          &:nth-child(2) {
            animation-delay: 0.2s;
          }

          &:nth-child(3) {
            animation-delay: 0.4s;
          }
        }
      }
    }
  }

  .results-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: @background-color;
    z-index: 100;
    overflow-y: auto;
    padding: 2rem;

    .results-header {
      padding: 0 20%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 2rem;

      h2 {
        font-size: 2rem;
        font-weight: 700;
        color: @text-color;
      }

      .new-recognition-button {
        display: flex;
        align-items: center;
        padding: 0.75rem 1.5rem;
        background: linear-gradient(135deg, @primary-color, @secondary-color);
        color: white;
        border: none;
        border-radius: 30px;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        transition: all @transition-duration;

        svg {
          margin-right: 0.5rem;
        }

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(255, 125, 59, 0.3);
        }
      }
    }

    .main-result {
      background: @card-background;
      border-radius: @border-radius;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      margin-bottom: 2.5rem;
      display: flex;
      flex-direction: column;
      cursor: pointer;
      transition: all @transition-duration;
      animation: fadeIn 0.5s both;
      max-width: 1000px;
      margin-left: auto;
      margin-right: auto;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
      }

      @media (min-width: 768px) {
        flex-direction: row;
        height: 400px;
      }

      .main-result-image {
        position: relative;
        height: 250px;

        @media (min-width: 768px) {
          width: 40%;
          height: 100%;
        }

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .main-result-score {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          padding: 1rem;
          background: rgba(0, 0, 0, 0.6);
          color: white;

          .score-bar {
            height: 6px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 3px;
            margin-bottom: 0.5rem;
            overflow: hidden;

            .score-fill {
              height: 100%;
              background: linear-gradient(90deg, #ff7d3b 0%, #ff9f45 100%);
              border-radius: 3px;
            }
          }

          .score-text {
            font-size: 1rem;
            font-weight: 500;
          }
        }
      }

      .main-result-info {
        padding: 2rem;
        flex: 1;
        display: flex;
        flex-direction: column;

        h3 {
          font-size: 1.8rem;
          font-weight: 700;
          margin-bottom: 1rem;
          color: @text-color;
        }

        .main-result-description {
          font-size: 1rem;
          line-height: 1.7;
          color: #4b5563;
          margin-bottom: 1.5rem;
          flex: 1;
          overflow-y: auto;
          max-height: 200px;
        }

        .result-link {
          display: inline-flex;
          align-items: center;
          color: @primary-color;
          font-weight: 500;
          text-decoration: none;
          margin-top: auto;

          svg {
            margin-left: 0.5rem;
            transition: transform @transition-duration;
          }

          &:hover svg {
            transform: translateX(3px);
          }
        }
      }
    }

    .other-results {
      max-width: 1000px;
      margin: 0 auto;

      .other-results-title {
        font-size: 1.4rem;
        font-weight: 600;
        margin-bottom: 1.5rem;
        color: @text-color;
      }

      .other-results-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 1rem;

        @media (min-width: 640px) {
          grid-template-columns: repeat(2, 1fr);
        }

        @media (min-width: 1024px) {
          grid-template-columns: repeat(3, 1fr);
        }

        .result-card {
          background: @card-background;
          border-radius: @border-radius;
          overflow: hidden;
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
          transition: all @transition-duration;
          cursor: pointer;
          animation: fadeIn 0.5s both;
          display: flex;
          flex-direction: column;
          height: 100%;

          &:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
          }

          .result-image {
            position: relative;
            height: 200px;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }

            .result-score {
              position: absolute;
              bottom: 0;
              left: 0;
              width: 100%;
              padding: 0.75rem;
              background: rgba(0, 0, 0, 0.6);
              color: white;

              .score-bar {
                height: 4px;
                background: rgba(255, 255, 255, 0.3);
                border-radius: 2px;
                margin-bottom: 0.5rem;
                overflow: hidden;

                .score-fill {
                  height: 100%;
                  background: linear-gradient(90deg, #ff7d3b 0%, #ff9f45 100%);
                  border-radius: 2px;
                }
              }
            }
          }

          .result-info {
            padding: 1.5rem;
            flex: 1;
            display: flex;
            flex-direction: column;

            h4 {
              font-size: 1.2rem;
              font-weight: 600;
              margin: 0 0 0.75rem 0;
              color: @text-color;
            }

            .result-description {
              font-size: 0.9rem;
              line-height: 1.6;
              color: #4b5563;
              margin-bottom: 1rem;
              flex: 1;
              overflow: hidden;
              display: -webkit-box;
              -webkit-line-clamp: 3;
              -webkit-box-orient: vertical;
            }

            .result-link {
              display: inline-flex;
              align-items: center;
              color: @primary-color;
              font-weight: 500;
              text-decoration: none;
              margin-top: auto;

              svg {
                margin-left: 0.5rem;
                transition: transform @transition-duration;
              }

              &:hover svg {
                transform: translateX(3px);
              }
            }
          }
        }
      }
    }
  }

  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 2rem;

    .modal-content {
      width: 100%;
      max-width: 900px;
      max-height: 90vh;
      background: @card-background;
      border-radius: @border-radius;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      position: relative;

      @media (min-width: 768px) {
        flex-direction: row;
      }

      .modal-close {
        position: absolute;
        top: 1rem;
        right: 1rem;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.5);
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        cursor: pointer;
        z-index: 10;
        transition: background @transition-duration;

        &:hover {
          background: rgba(0, 0, 0, 0.7);
        }
      }

      .modal-image {
        flex: 1;
        position: relative;
        height: 300px;

        @media (min-width: 768px) {
          height: auto;
        }

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .modal-score {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          padding: 1rem;
          background: rgba(0, 0, 0, 0.6);
          color: white;

          .score-bar {
            height: 6px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 3px;
            margin-bottom: 0.5rem;
            overflow: hidden;

            .score-fill {
              height: 100%;
              background: linear-gradient(90deg, @primary-color, @secondary-color);
              border-radius: 3px;
            }
          }

          .score-text {
            font-size: 1rem;
            font-weight: 500;
          }
        }
      }

      .modal-info {
        flex: 1;
        padding: 2rem;
        overflow-y: auto;

        h2 {
          font-size: 1.8rem;
          font-weight: 700;
          margin-bottom: 1rem;
          color: @text-color;
        }

        .modal-description {
          font-size: 1rem;
          line-height: 1.7;
          color: #4b5563;
          margin-bottom: 1.5rem;
        }

        .modal-link {
          display: inline-flex;
          align-items: center;
          color: @primary-color;
          font-weight: 500;
          text-decoration: none;

          svg {
            margin-left: 0.5rem;
            transition: transform @transition-duration;
          }

          &:hover svg {
            transform: translateX(3px);
          }
        }
      }
    }
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s;
  }

  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }

  .modal-enter-active,
  .modal-leave-active {
    transition: opacity 0.3s;
  }

  .modal-enter-from,
  .modal-leave-to {
    opacity: 0;
  }

  .slide-up-enter-active,
  .slide-up-leave-active {
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  }

  .slide-up-enter-from {
    transform: translateY(100%);
    opacity: 0;
  }

  .slide-up-leave-to {
    transform: translateY(100%);
    opacity: 0;
  }

  @keyframes scan {
    0% {
      top: 20%;
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      top: 80%;
      opacity: 0;
    }
  }

  @keyframes loadingDots {
    0%, 80%, 100% {
      opacity: 0;
    }
    40% {
      opacity: 1;
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}
</style>

